<template>
    <div class="preson">
        <h1>中国</h1>
        <h2 ref="title2">北京</h2>
        <h3>尚硅谷</h3>
        <button @click="showLog">点我输出h2的元素</button>
    </div>
</template>

<script lang="ts" setup name="preson">

//总结
//用在普通函dom标签上，获取的是DOM节点
//用在组件标签上，获取的是组件实例对象
import { ref, watch, watchEffect,defineExpose } from 'vue'
let title2 = ref()
let a=ref(0)
let b=ref(1)
let c=ref(2)
let showLog = () => {

    console.log(title2.value.innerText);
    
}
defineExpose({ a, b, c })
</script>

<style  scoped>
.preson {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 10px;
}

button {
    margin: 2px 10px;
}
</style>